<template>
  <my-div class="login">
    <head :title="url" :back="false">
        <div slot="right" style="width:220px" @click="push('root:pages/login/create.js')">
          <text  style="font-size:28px;color:rgba(102,102,102,1);text-align:right;">{{$t('login.create_wallet')}}</text>
        </div>
    </head>
    <div class="logo">
      <image style="width:238px;height:142px;" src="root:img/logo@2x.png"></image>
    </div>
    <div class="login-form">
      <div class="login-input">
        <input type="text" :placeholder="$t('wallet.id_card')" class="login-input-inner" v-model="form.name" />
      </div>
      <div class="login-input" style="margin-top:40px;">
        <input type="password" :placeholder="$t('wallet.pw')" class="login-input-inner" v-model="form.password" />
      </div>
      <div class="login-btn" @click="doLogin">
        <text style="color:#ffffff;font-size:24px;text-align: center;line-height:74px;
        ">{{$t('login.login')}}</text>
      </div>
    </div>
  </my-div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      form:{
        name:'',
        password:''
      }
    }
  },
  created() {
    var page=weex.requireModule("page")
    page.doubleBack()
    page.setBackKeyCallback(()=>{
        page.enableBackKey(true);
    })
  },
  methods: {
    doLogin(){
      const account = this.pref.get('account')
      const account_list_keys = Object.keys(account)
      if(!this.form.name) return this.toast(this.$t('common.account_name'))
      if(!this.form.password) return this.toast(this.$t('common.account_pw'))
      if(account_list_keys.length<1) return this.toast(this.$t('common.register'))

      account_list_keys.forEach(key => {
        const name =  account[key].user.name
        const pw = account[key].user.pw
        if(name === this.form.name && pw === this.form.password){
           this.pref.setString('current_user_key',key)
           this.push({url:'root:pages/home/index.js',animated:true})
        }else {
           this.toast(this.$t('common.account_fali'))
        }

      })

    }
  }
}
</script>
<style  scoped>
.login{
  position: absolute;
  top: 0;
  bottom: 0;
}
.logo{
  width: 750px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-top: 50px;
}
.login-form{
  display: flex;
  justify-content: center;
  margin-top: 158px;

}
.login-input{
  width: 608px;
  height: 74px;
  margin-left: 70px;
  border-radius: 10px;
  background-color: rgba(247,247,247,1);
}
.login-input-inner{
  font-size: 24px;
  height: 74px;
  padding-left: 40px;
}
.login-btn{
  width: 608px;
  margin-left: 70px;
  height: 74px;
  opacity: 1;
  background-color: rgba(70,120,245,1);
  margin-top: 100px;
  border-radius: 10px;
}
</style>
